<template>
  <view class="sent-off-check">
    <nav-bar left-text="查看寄件" />
    <bg-set background="#f2f3f7" />
    <scroll-view
      class="scroll-y"
      scroll-y="true"
      @scrolltolower="scrolltolower"
    >
      <view>
        <template v-if="loading">
          <loading />
        </template>
        <template v-else-if="!loading && listData.length > 0"
          ><sent-off-card
            v-for="item in listData"
            :sent-off-card-data="item"
            :key="item.mailUserName + item.pickUpAddress"
        /></template>
        <template v-else-if="!loading && listData.length === 0 && success">
          <loading-empty
            tip="你还没有寄件订单快去寄件吧~"
            buttonText="去寄件"
            url="/pages/mail/mail"
            toSwitchTab
          />
        </template>
        <template v-else-if="!loading && listData.length === 0 && !success">
          <loading-error />
        </template>
        <scroll-view-holder />
      </view>
    </scroll-view>
  </view>
</template>

<script>
import SentOffCard from "./components/sent-off-card.vue";
import mailAPI from "/api/modules/mail";
import storageOperation from "/utils/index";
export default {
  name: "sent-off-check",
  components: { SentOffCard },
  data() {
    return {
      loading: false,
      success: true,
      listData: [],
    };
  },
  onShow() {
    this.doRequest();
  },
  methods: {
    scrolltolower() {
      uni.showToast({
        title: "我可是有底线的哈",
        duration: 2000,
        icon: "none",
        position: "top",
      });
    },
    doRequest() {
      this.listData = [];
      this.loading = true;
      this.success = true;
      const userName = storageOperation.getStorageSync("userName").value;
      mailAPI
        .queryMail({ userName })
        .then((res) => {
          this.listData = res;
        })
        .catch((err) => {
          this.success = false;
          uni.showToast({
            title: "加载寄件信息失败",
            icon: "error",
            position: "top",
            duration: 1000,
          });
          console.log(err);
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
};
</script>
<style lang='scss' scoped>
.sent-off-check {
  position: fixed;
  width: 100%;
  height: 100vh;
  .scroll-y {
    padding: 20rpx;
    width: 100%;
    height: calc(100vh - 44rpx);
    box-sizing: border-box;
  }
}
</style>